<template>
    <div class="home">
        <swiper/>
        <div class="recommend">
            <el-card style="background-color: rgb(175, 223, 228);text-align: center;vertical-align: middle;" @click.native="WeekPop">
                7天热榜
            </el-card >
            <el-card style="background-color: #fedcbd;text-align: center;vertical-align: middle;" @click.native="songRecom">
                歌曲推荐
            </el-card>
            <el-card style="background-color: #cde6c7;text-align: center;vertical-align: middle;" @click.native="recentUpdate">
                最近更新
            </el-card>
        </div>
        <div class="section" v-for="(item,index) in songsList" :key="index">
            <div class="section-title">{{item.name}}</div>
            <content-list :contentList="item.list"></content-list>
        </div>
    </div>
</template>

<script>

    import Swiper from "../components/Swiper";
    import ContentList from "../components/ContentList";

    export default {
        name: 'Home',
        components: {
            Swiper,
            ContentList
        },
        data() {
            return {
                songsList: [
                    {name: "歌单", list: []},
                    {name: "歌手", list: []}
                ]
            }
        },
        created() {
            this.getSongList();
            this.getSinger();
        },
        methods: {
            WeekPop(){
                console.log('7天热榜')
                this.$router.push('/weekpop')
            },
            songRecom(){
                console.log('歌曲推荐')
                this.$router.push('/songrec')
            },
            recentUpdate(){
                console.log('最近更新')
                this.$router.push('/recupdate')
            },
            // 获取前10 条歌单
            getSongList() {
                this.getRequest('/user/playlist/').then(res => {
                    this.songsList[0].list = res.data
                }).catch(err => {
                    console.log(err)
                })
            },
            // 获取前10 个歌手
            getSinger() {
                this.getRequest('/user/singer/').then(res => {
                    this.songsList[1].list = res.data
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .recommend .el-card{
        font-family: "Microsoft YaHei";
        font-size: 20px;
        margin-left: 30px;
        margin-right: 30px;
        margin-top: 15px;
        padding: 20px;
        cursor: pointer;
        width: 33%;
        height: 80px;
     }
    .recommend {
        margin-top: 20px;
        padding-top: 10px;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        padding: 0px 120px 5px 120px;
    }

    @import '../assets/css/home.scss';
    @import '../assets/css/index.scss';
</style>
